<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03tab栏切换</title>
    <style>
        .products {
            margin: 0 0 0 150px;    
            border: 1px solid #ccc;   
            border-top: none;  
            width: 1331px;
            display: none;
            /* height: 560px; */
        }
        .products .main{
            float: left;
            width: 235px;
            height: 280px; 
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc; 
            padding: 30px 0 0 30px;
            /* display: none; */
        }
        .selected {
            display: block;
        }
        .laji {
            border-right: 1px solid #ccc;
        }
        .tab {
            padding-left: 0px;
            margin: 100px 0 0 150px;
            border: 1px solid #ccc;
            border-bottom: none;
            width: 327px;
            height: 48px;
        }
        .tab li {
            padding-left: 6px;
            padding-bottom: 0;
            list-style: none;
            float: left;
            line-height: 45px;
            border-top: 3px solid white;
            /* background-color: red; */
        }
        .tab li span {
            color: #ccc;
        }
        .tab li.active {
            border: none;
            border-top: 3px solid red;
            /* border-bottom: 0; */
        }
    
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span> | </span></li>
            <li class="tab-item">&nbsp;国际名牌<span> | </span></li>
            <li class="tab-item">&nbsp;清洁用品<span> | </span></li>
            <li class="tab-item">&nbsp;男士精品<span>&nbsp;</span></li>
        </ul>
        <div class="products selected">
            <div class="main">
                <a href="#"><img src="img/li-01.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-02.jpg" alt=""></a>                
            </div>
            <div class="main">
                <a href="#"><img src="img/li-03.jpg" alt=""></a>                
            </div>
            <div class="main">
                <a href="#"><img src="img/li-04.jpg" alt=""></a>                
            </div>
            <div class="main laji">
                <a href="#"><img src="img/li-05.jpg" alt=""></a>                
            </div>
            <div class="main">
                <a href="#"><img src="img/li-06.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-07.jpg" alt=""></a>                
            </div>
            <div class="main">
                <a href="#"><img src="img/li-08.jpg" alt=""></a>                
            </div>
            <div class="main">
                <a href="#"><img src="img/li-09.jpg" alt=""></a>                
            </div>
            <div class="main laji">
                <a href="#"><img src="img/li-10.jpg" alt=""></a>                
            </div>
        </div>
        <div class="products">
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-11.jpg" alt=""></a>
            </div>
        </div>
        <div class="products">
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
        </div>
        <div class="products">
            <div class="main">
                <a href="#"><img src="img/li-12.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>
            <div class="main">
                <a href="#"><img src="img/li-13.jpg" alt=""></a>
            </div>       
        </div>
    </div>

    <script src="../jquery-3.2.1.js"></script>
    <script>
    
        $(function(){
            $(".tab-item").mouseenter(function(){
                $(this).addClass("active").siblings().removeClass("active");

                var idx = $(this).index();
                $(".products").eq(idx).addClass("selected").siblings().removeClass("selected");
            });
        });
        

    </script>
</body>
</html>